import React from 'react';
import Portal from './portal';
import { observer } from 'mobx-react';
import { findSimulator } from 'common/utils/store';
import Utils from 'common/utils';

const { addEvent, removeEvent } = Utils;
@observer
export default function prepareModule(ModuleComponent, mod) {
  const simulator = findSimulator(mod);
  const parent = mod.parent;
  let isMoved = false; // 是否移动过
  let originSelected = false; // 初始选中状态
  let axis = {
    startX: 0,
    startY: 0,
  };

  const detachMouseEvent = () => {
    removeEvent(document, 'mousemove', onMouseMove);
    removeEvent(document, 'mouseup', onMouseUp);
    removeEvent(document, 'mouseleave', onMouseUp);
  };

  const onMouseMove = (e) => {
    e.stopPropagation();
    update(e);
    isMoved = true;
  };
  const onMouseUp = (e) => {
    e.stopPropagation();
    e.preventDefault();
    detachMouseEvent();
    parent.list.forEach(item => {
      delete item.moveAxis;
    });
    if (CFG.hotKey.shift === true && originSelected && !isMoved) {
      mod.unSelectSelf();
    }
  };

  const update = (e) => {
    const { pageX, pageY } = e;
    // console.log(pageX === e.clientX);
    const { startX, startY } = axis;
    parent.list.forEach(item => {
      if (item.selected && !item.lock) {
        if (!item.moveAxis) {
          item.moveAxis = {
            originX: item.left,
            originY: item.top
          };
        }
        const { originX, originY } = item.moveAxis;
        const difX = pageX - startX;
        const difY = pageY - startY;
        item.update({
          left: originX + difX / simulator.scale,
          top: originY + difY / simulator.scale
        });
      }
    });
  };


  return observer(
    class ModuleHOC extends React.Component {
      static displayName = `ModuleHOC(${mod.type})`;

      componentDidMount() {
        setTimeout(() => {
          if (this.refs.node) {
            mod.setNode(this.refs.node);
          }
        }, 1);
      }

      componentWillUnmount() {
        detachMouseEvent();
      }

      render() {
        // console.log(mod, mod.moveAxis);
        if (!mod.visible) return null;
        const { topPosition } = this.props;
        console.log(mod);

        const props = {
          mod,
          onMouseDown: (e) => {
            e.stopPropagation();
            if (mod.type !== 'text') {
              e.preventDefault();
            }
            const isMultiSelectMode = CFG.hotKey.shift === true;
            if (!mod.lock && !mod.isBelongInitial ) {
              const { pageX, pageY } = e;
              addEvent(document, 'mousemove', onMouseMove);
              addEvent(document, 'mouseup', onMouseUp);
              addEvent(document, 'mouseleave', onMouseUp);
              isMoved = false;
              originSelected = mod.selected;
              mod.selectSelf(isMultiSelectMode);
              axis = {
                startX: pageX,
                startY: pageY,
              };
              mod.moveAxis = {
                originX: mod.left,
                originY: mod.top,
              };
            } else {
              mod.selectSelf(isMultiSelectMode);
            }
          },
          ref: 'node',
        };

        const portalProps = {
          active: mod.selected,
          isMulti: mod.parent.hasMultiCurrents,
          simulator,
          topPosition,
          mod,
        };

        {/*<Portal {...portalProps}>
          <ModuleComponent {...props} />
        </Portal>*/}
        return (
          <Portal {...portalProps}>
            <ModuleComponent {...props} />
          </Portal>
        );
      }
    }
  );
}
